<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
    <view class="body after-navber">
        <view class="no-content" v-if="!data.list||data.list.length==0">暂无记录</view>
        <view style="padding:24upx 24upx 0 24upx;" v-else>
            <view class="flex-col flex-y-center detail-head">
                <view style="color:#666666;">{{data.list.name}}</view>
                <view style="color:#353535;font-weight:bold;font-size:25pt;padding:10upx 0">￥{{data.list.sub_price}}</view>
                <view style="color:#353535;fs-b">{{data.list.min_price_desc}}</view>
                <view @tap="receive" class="flex-x-center detail-bu" :data-index="data.list.id" style="background:#ff4544;color:#ffffff;" v-if="data.list.is_receive==0">立即领取</view>
                <view class="flex-x-center detail-bu" style="border:1upx solid #ff4544;background:#ffffff;color:#ff4544;" v-if="data.list.is_receive==1">已领取</view>
                <view class="flex-x-center detail-bu" v-if="data.list.status==0">未使用</view>
                <view class="flex-x-center detail-bu" v-if="data.list.status==1">已使用</view>
                <view class="flex-x-center detail-bu" v-if="data.list.status==2">已过期</view>
            </view>
            <image src="/static/images/coupon-details.png" style="display:block;height:48upx;width:100%;"></image>
            <view class="detail-prize">
                <view class="detail-name">有效期</view>
                <view class="detail-manual">
                    <text v-if="data.list.expire_type==2">{{data.list.begin_time}} ~ {{data.list.end_time}}</text>
                    <text v-if="data.list.expire_type==1">领取{{data.list.expire_day}}天内有效</text>
                </view>
                <view class="detail-name">使用规则</view>
                <view class="detail-manual">
                    <text class="user_coupon_font" v-if="data.list.appoint_type==1&&(data.list.cat.length==0||data.list.goods==null)">全场通用</text>
                    <text class="user_coupon_font" v-if="data.list.appoint_type==2&&(data.list.goods.length==0||data.list.goods==null)">全场通用</text>
                    <text class="user_coupon_font" v-if="data.list.appoint_type==null">全场通用</text>
                    <view class="user_coupon_font" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:87%;" v-if="data.list.appoint_type==1&&data.list.cat.length>0">
                        仅限<text v-for="(cat,index) in data.list.cat" :key="id">{{cat.name}}、</text>产品使用
                        </view>
                    <view @tap="goodsList" class="user_coupon_font" :data-goods_id="list.goods" :data-id="data.list.id" style="height:50upx;" v-if="data.list.appoint_type==2&&data.list.goods.length>0">指定商品使用 点进去查看指定商品</view>
                </view>
                <block v-if="data.list.rule">
                    <view class="detail-name">使用说明</view>
                    <view class="detail-manual">{{data.list.rule}}</view>
                </block>
            </view>
        </view>
    </view>
    <comp-footer v-bind="{data:data}"></comp-footer>
    <get-coupon v-bind="{data:data}" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox"></get-coupon>
</view>

	</view>
</template>

<script>var myVue = {};
	import getCoupon from '../../components/get-coupon/get-coupon.vue'
	export default {
		components:{getCoupon},
		data() {
			return {
				data:{}
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this, o = t.user_coupon_id ? t.user_coupon_id : 0, a = t.coupon_id ? t.coupon_id : 0;
        (o || a) && (myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.coupon.coupon_detail,
            data: {
                user_conpon_id: o,
                coupon_id: a
            },
            success: function(t) {
                0 == t.code && e.setData({
                    list: t.data.list
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        }));
    },
		methods:{
			goodsList: function(t) {
        var e = this, o = t.currentTarget.dataset.goods_id, a = t.currentTarget.dataset.id, i = e.data.list;
        parseInt(i.id) !== parseInt(a) || 2 == i.appoint_type && i.goods.length > 0 && myVue.getApp.core.navigateTo({
            url: "/pages/list/list?goods_id=" + o
        });
    },
    receive: function(t) {
        var e = this, o = t.target.dataset.index;
        myVue.getApp.core.showLoading({
            mask: !0
        }), e.hideGetCoupon || (e.hideGetCoupon = function(t) {
            var o = t.currentTarget.dataset.url || !1;
            e.setData({
                get_coupon_list: []
            }), o && myVue.getApp.core.navigateTo({
                url: o
            });
        }), myVue.getApp.request({
            url: myVue.getApp.api.coupon.receive,
            data: {
                id: o
            },
            success: function(t) {
                if (0 == t.code) {
                    var o = e.data.list;
                    o.is_receive = 1, e.setData({
                        list: o,
                        get_coupon_list: t.data.list
                    });
                }
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    closeCouponBox: function(t) {
        this.setData({
            get_coupon_list: ""
        });
    }
		}
	}
</script>

<style scoped>
page {
    background: #ff7b33;
}

.page /deep/ .detail-name {
    color: #999999;
    padding-bottom: 20upx;
}

.page /deep/ .detail-manual {
    color: #353535;
    padding-bottom: 40upx;
}

.page /deep/ .xia {
    position: absolute;
    width: 28upx;
    height: 28upx;
    right: 15px;
    bottom: 9px;
}

.page /deep/ .detail-bu {
    margin-top: 32upx;
    border-radius: 32upx;
    background: #f7f7f7;
    color: #999999;
    line-height: 64upx;
    width: 240upx;
}

.page /deep/ .detail-prize {
    background: #ffffff;
    padding: 24upx 40upx 14upx 40upx;
    border-radius: 0 0 16upx 16upx;
}

.page /deep/ .detail-head {
    background: #ffffff;
    padding: 64upx 40upx 24upx 40upx;
    border-radius: 16upx 16upx 0 0;
}

.page /deep/ .no-content {
    color: #888;
    padding: 100upx 0 0 0;
    text-align: center;
}
</style>
